<template>
  <view class="min-vh-100 d-flex flex-column">
    <StatusBar></StatusBar>
    <HeaderComponent title="特殊品种开户" class="w-100" style="width: 10%"></HeaderComponent>
    <view class="tabs d-flex justify-content-around">
      <view v-for="(tab, index) in tabs" :key="index" @click="switchTab(index)"
            class="tab-item text-light" :class="{ active: currentTab === index }">
        {{ tab.name }}
      </view>
    </view>
    <!-- Swiper 容器 -->
    <swiper class="" :current="currentTab" @change="onSwiperChange">
      <swiper-item v-for="(tab, index) in tabs" :key="index" :index="index" class="">
        <view class="p-3">
          <text>{{ tab.name }}期货交易账户开通条件</text>
          <view class="m-3">
            <view class="">1.开通条件</view>
            <view class="">2.开通条件</view>
            <view class="">3.开通条件</view>
            <view class="">4.开通条件</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="mt-5 mx-3" style="color: #FD7E2A;">金融期货开户需参与监控中心的基础测试，开户预约或详情请联系客服。</view>
    <view class="mt-5 d-flex justify-content-center">
      <CustomerService2></CustomerService2>
    </view>
    <view class="my-5 flex-grow-1 d-flex flex-column justify-content-end">
      <view class="w-100 d-flex justify-content-around text-center">
        <view class="text-secondary" @tap="goto('/pages/start/common_problem/common_problem')"> 常见问题</view>
        <view class="text-secondary">|</view>
        <AttentionWx class="text-secondary"></AttentionWx>
      </view>
    </view>
  </view>
</template>
<script>
import HeaderComponent from "../../common/HeaderComponent.vue";
import CustomerService2 from "../../common/CustomerService2.vue";
import AttentionWx from "../../common/AttentionWx.vue";
import StatusBar from "../../common/StatusBar.vue";

// 特殊品种开户
export default {
  components: {
    StatusBar,
    AttentionWx,
    CustomerService2,
    HeaderComponent,
  },
  data() {
    return {
      tabs: [
        {
          name: '金融',
          content: '这是第三个 Tab 的内容'
        },
        {
          name: '原油',
          content: '这是第三个 Tab 的内容'
        },
        {
          name: '铁矿石',
          content: '这是第三个 Tab 的内容'
        },
        {
          name: 'PTA',
          content: '这是第三个 Tab 的内容'
        },
        {
          name: '期权',
          content: '这是第三个 Tab 的内容'
        },
      ],
      currentTab: 0,
      center: "center",
      title: "开户预约",
      content: "金融期货开户需参与监控中心的基础测试,开户预约或详情请联系客服",
      phone: "400-8888-933"
    }
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    },
    onSwiperChange(event) {
      this.currentTab = event.detail.current;
    },
    goto(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
}
</script>

<style>
.tabs {
  display: flex;
  justify-content: space-around;
  background-color: #eb344a;;
  padding: 10px 0;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}

.tab-item.active {
  color: #409EFF;
  border-bottom: 2px solid white;
}
</style>
